<template>
    <div class="container_roles">
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色列表</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 卡片 -->
      <el-card>
        <!-- 添加角色按钮 -->
        <el-button type="primary">添加角色</el-button>

        <!-- 表格 -->
        <el-table :data="RolesTableData" border style="width: 100%">

          <!-- 展开行 -->
          <el-table-column type="expand" width="60">
            <template slot-scope="scope">
              <!-- 第一层 -->
              <el-row v-for="(item_1, index_1) in scope.row.children" :key="item_1.id" :style="{'border-top': '1px solid #ccc', 'border-bottom': index_1 === scope.row.children.length -1 ? '1px solid #ccc' : '' }">

                <el-col :span="4">
                  <el-tag @close="removeDel(scope, item_1.id)" closable>{{item_1.authName}}
                  </el-tag>
                  <i class="el-icon-caret-right"></i>
                </el-col>

                <!-- 第二层 -->
                <el-col :span="20">
                  <el-row :style="{'border-top': index_2 == 0? '': '1px solid #ccc'}" v-for="(item_2, index_2) in item_1.children" :key="item_2.id">
                    <el-col :span="5">
                        <el-tag type="success" @close="removeDel(scope, item_2.id)" closable>{{item_2.authName}}</el-tag><i class="el-icon-caret-right"></i>
                    </el-col>

                    <!-- 第三层 -->
                    <el-col :span="19">
                        <el-tag @close="removeDel(scope, item_3.id)" v-for="item_3 in item_2.children" :key="item_3.id" type="warning" closable>{{item_3.authName}}</el-tag>
                    </el-col>

                  </el-row>
                </el-col>
              </el-row>
            </template>
          </el-table-column>

          <el-table-column type="index" width="80">
          </el-table-column>

          <el-table-column prop="roleName" label="角色名称" width="200">
          </el-table-column>

          <el-table-column prop="roleDesc" label="描述" width="200">
          </el-table-column>

          <el-table-column prop="address" label="操作" >
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
              <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
              <el-button @click="showSetRoleDialog(scope)" type="warning" icon="el-icon-setting" size="mini">分配权限</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分配权限对话框 -->
        <el-dialog
          title="分配权限"
          :visible.sync="setRoleDialogVisible">

          <!-- 属性结构 -->
          <el-tree
            :data="setRoleData"
            node-key="id"
            ref="tree"
            :default-checked-keys='defaultCheckedKeys'
            :props="setRoleProps"
            :default-expand-all="true"
            show-checkbox>
          </el-tree>

          <span slot="footer" class="dialog-footer">
            <el-button @click="setRoleDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="setRights">确 定</el-button>
          </span>

        </el-dialog>

      </el-card>

    </div>
  </template>

<script>
// 导入外部js
import mix from './Roles-mixins'
export default {
  mixins: [mix]
}
</script>

<style scoped>
    .el-tag {
        margin: 10px 5px;
    }
</style>
